<template>
	<view class="total">
		<view class="head">
			<view style="display: flex;flex-direction: column;padding-left: 10rpx;justify-content: space-around;height: 150rpx;">
				<span style="font-size: 40rpx;color: black;font-weight: bold;">{{shop_name}}</span>
				<view style="display: flex;flex-direction: column;">
					<view style="display: flex;align-items: center;">
						<image src="../../../../static/定向.png" style="height: 30rpx;width: 30rpx;"></image>
						<span style="font-size: 30rpx;color: darkgray;padding-left: 10rpx;">距离您0m</span>
					</view>
					
					<span style="font-size: 32rpx;">{{shop_addr}}</span>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;width: 640rpx;">
				<span>预留电话</span>
				<input placeholder="请输入" style="width: 130rpx;"/>
			</view>
			<view style="display: flex;justify-content: space-between;width: 650rpx;">
				<span>就餐时间</span>
				<view>
					<span style="color: green;">立即喝</span>
					<span style="padding-left: 10rpx;">></span>
				</view>
				
			</view>
			<view style="display: flex;justify-content: space-between;">
				<span>享用方式</span>
				<span>在这喝</span>
			</view>
		</view>
		
		<view class="middle">
			<view v-for="(item,index) in pay_list" :key="index">
				<view style="display: flex;width: 100%;padding-bottom: 10rpx;" >
					<image :src="item.image_name" style="width: 200rpx;height: 120rpx;"></image>
					
					<view style="height: 100rpx;width: 580rpx;display: flex;flex-direction: column;">
						<view style="width: 560rpx;display: flex;justify-content: space-between;">
							<span style="color: black;font-size: 35rpx;font-weight: bold;">{{item.name}}</span>
							<span style="color: green;font-size: 35rpx;font-weight: bold;">￥{{item.price}}</span>
						</view>
						<span style="font-size: 30rpx;color: darkgray">{{item.detail}}</span>
						<span style="font-size: 32rpx;color: green;">×{{item.num}}</span>
					</view>
				</view>
			</view>
			
			<view style="display: flex;width: 100%;justify-content: space-between;">
				<view>
					<span style="background-color: green;font-size: 30rpx;border-radius: 5rpx;color: white;padding: 2rpx;padding-left: 10rpx;padding-right: 10rpx;">劵</span>
					<span style="margin-left: 15rpx;">可用优惠券</span>
				</view>
				
				<span style="color: darkgrey;">暂无优惠券可用</span>
			</view>
			<hr style="height: 1rpx;width: 580rpx;background-color: #f1f1f1;">
			<view style="display: flex;width: 100%;flex-direction: row-reverse;">
				<span style="font-size: 40rpx;">{{total_price}}</span>
				<span>小计￥</span>
				
			</view>
			
		</view>
		
		<view class="jiyu">
			<span style="font-weight: bold;">寄语</span>
			<textarea placeholder="写点东西要不" style="height: 300rpx;"></textarea>
		</view>
		
		<view class="beizhu">
			<span style="font-weight: bold;">备注</span>
			<textarea placeholder="写点东西要不" style="height: 100rpx;"></textarea>
		</view>
		
		<view class="bottom">
			<view style="margin-left: 20rpx;">
				<span>合计：</span>
				<span style="color: green;">￥</span>
				<span style="color: green;font-size: 50rpx;">{{total_price}}</span>
			</view>
			<van-button type="primary" round style="margin-right: 20rpx;" @click="pay()">提交支付</van-button>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
				total_price:0,
				shop_name:"",
				shop_addr:"",
				pay_list:[]
			}
		},
		methods: {
			
			pay(){
				let t=this
				
				uni.request({
					url:"http://localhost:3000/delOrder",
					
					
				})
				let ran=parseInt(Math.random().toFixed(3)*1000) ;
				for(let i=0;i<t.pay_list.length;i++){
					t.$set(t.pay_list[i],"order_id",ran)
					
				}
				uni.request({
					url:"http://localhost:3000/insertOrder",
					data:JSON.stringify(t.pay_list),
					method:"POST",
					dataType:"application/json"
				})
				// uni.request({
				// 	url:"http://localhost:3000/insertHistoryOrder",
				// 	data:JSON.stringify(t.pay_list),
				// 	method:"POST",
				// 	dataType:"application/json"
				// })
				uni.reLaunch({
					url:"../order/order",
					
				})
				uni.request({
					url:"http://localhost:3000/clearItems",
					
					
					
				})
				
			}
		},
		onLoad(value) {
			console.log(value)
			this.shop_name=value.shop_name
			this.shop_addr=value.shop_addr
		},
		
		mounted() {
			let t=this;
			uni.request({
				url:"http://localhost:3000/getPay",
				success(data) {
					t.pay_list=data.data
					for(let i=0;i<t.pay_list.length;i++){
						t.total_price+=(t.pay_list[i].price*t.pay_list[i].num)
					}
				}
			})
			
		},
		
		onHide() {
			console.log("pay Hide...")
			uni.request({
				url:"http://localhost:3000/delPay"
			})
		}
	}
</script>

<style scoped>
	.total{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f1f1f1;
		justify-content: space-around;
		overflow: scroll;
		
	}
	
.head{
	height: 500rpx;
	width: 660rpx;
	background-color: white;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 30rpx;
	
	
}
.middle{
	
	width: 660rpx;
	background-color: white;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	justify-content: space-between;
	margin-top: 30rpx;
	margin-top: 30rpx;
}
.jiyu{
	height: 200rpx;
	width: 660rpx;
	background-color: white;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	justify-content: space-between;
	margin-top: 30rpx;
}
.beizhu{
	height: 200rpx;
	width: 660rpx;
	background-color: white;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	justify-content: space-between;
	margin-bottom: 300rpx;
	margin-top: 30rpx;
}
.bottom{
	position: fixed;
	bottom: 0rpx;
	box-shadow: 0rpx -5rpx 20rpx darkgray;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 200rpx;
	width: 750rpx;
	z-index: 10;
	background-color: white;
}

</style>
